window.onload = function () {
  (function () {
    //   任务列表
    let todoListData = [
      {
        content: "吃饭",
        check: false,
      },
      {
        content: "睡觉",
        check: false,
      },
      {
        content: "滑雪",
        check: false,
      },
      {
        content: "看书",
        check: false,
      },
    ];
    document.querySelector(".add").addEventListener("keydown", function (e) {
      if (e.keyCode === 13 && this.value) {
        let itemThis = this;
        addItem(itemThis);
        // 这里可以使用call呢？
      }
    });
    // 事件委派
    document.querySelector(".todo").addEventListener("click", function (e) {
      if (e.target.classList.contains("delete")) {
        removeChlid({ item: e.target });
      } else if (e.target.classList.contains("clear")) {
        removeChlid({ all: true });
      } else if (e.target.classList.contains("checkAll")) {
        checkDom({ item: e.target, all: true });
      } else if (e.target.classList.contains("check")) {
        checkDom({ item: e.target, all: false });
      }
    });
    renderTodoList();
    function renderTodoList() {
      todoListData.map((item) => {
        renderDom(item.content, item.check);
      });
    }
    function renderDom(content, check) {
      let li = document.createElement("li");
      let el = `
                    <div class="info">
                        <input  type="checkbox" class="lf check" name="checkbox"  ${
                          check ? checked : ""
                        }>
                        <span class="lf">${content}</span>
                    </div>
                    <div class="deletodo">
                        <button class="delete">删除</button>
                    </div>
        `;
      li.innerHTML = el;
      document.querySelector("ul").insertAdjacentElement("beforeend", li);
    }

    // 添加item
    function addItem(itemThis) {
      let content = itemThis.value;
      let check = false;
      todoListData.push({ content, check });
      addItemDom(content);
      itemThis.value = "";
    }
    // 添加item 到dom
    function addItemDom(content) {
      // 渲染dom
      renderDom(content);
      finishItem();
    }
    // 删除
    function removeChlid({ item = null, all = false }) {
      if (all) {
        let checkALl = document.querySelectorAll(".info>input");
        // console.log(checkALl);
        for (let i = checkALl.length - 1; i >= 0; i--) {
          if (checkALl[i].checked) {
            document
              .querySelector("ul")
              .removeChild(checkALl[i].parentNode.parentNode);
            todoListData.splice(i, 1);
          }
        }
      } else if (!all && item) {
        let itemParent = item.parentNode.parentNode;
        let liList = document.querySelectorAll("ul > li");
        // 更新任务数组
        liList.forEach((element, index) => {
          if (itemParent === element) {
            todoListData.splice(index, 1);
          }
        });
        document.querySelector("ul").removeChild(itemParent);
      }
      finishItem();
    }
    function finishItem() {
      //完成数量
      let checkTotal = 0;
      let liList = document.querySelectorAll("ul > li");
      // 更新任务数组
      liList.forEach((element, index) => {
        if (todoListData[index].check) {
          checkTotal++;
        }
      });
      if (checkTotal === todoListData.length) {
        document.querySelector(".checkAll").checked = true;
      } else {
        document.querySelector(".checkAll").checked = false;
      }
      if (todoListData.length === 0) {
        document.querySelector(".checkAll").checked = false;
      }
      document.querySelector(".finish").innerHTML = checkTotal;
      document.querySelector(".all").innerHTML = todoListData.length;
    }
    function checkDom({ item = null, all = false }) {
      if (all) {
        let checkALl = document.querySelectorAll(".info>input");
        for (let i = checkALl.length - 1; i >= 0; i--) {
          // 更新dom
          checkALl[i].checked = item.checked;
          //   更新todoListData
          todoListData[i].check = item.checked;
        }
      } else if (!all) {
        let itemParent = item.parentNode.parentNode;
        let liList = document.querySelectorAll("ul > li");
        // 更新任务数组
        liList.forEach((element, index) => {
          if (itemParent === element) {
            todoListData[index].check = item.checked;
          }
        });
      }
      finishItem();
    }
  })();
};
